<div class="row">
    <div class="card">
        <div class="card-header">日期控件
            <div class="card-block">
                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
                            <div class="input-group-addon" (click)="d.toggle()">
                                <i class="glyphicon glyphicon-calendar" style="width: 1.2rem; height: 1rem; cursor: pointer;"></i>
                            </div>
                        </div>
                    </div>
                </form>

                <hr/>
                <pre>Model: {{ model | json }}</pre>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="card">
        <div class="card-header">
            <p>下面是分页控件Demo</p>
        </div>
        <div class="card-block">

            <ngb-pagination [collectionSize]="120" size='sm' [(page)]="page" [maxSize]="5" [boundaryLinks]="true" (pageChange)='changePage()'></ngb-pagination>

            <div>maxSize = 5, rotate = true</div>
            <!--<ngb-pagination [collectionSize]="120" [(page)]="page" [maxSize]="5" [rotate]="true" [boundaryLinks]="true"></ngb-pagination>

<div>maxSize = 5, rotate = true, ellipses = false</div>
<ngb-pagination [collectionSize]="120" [(page)]="page" [maxSize]="5" [rotate]="true" [ellipses]="false" [boundaryLinks]="true"></ngb-pagination>-->

            <hr>

            <pre>Current page: {{page}}</pre>
        </div>
    </div>
</div>

<div class="row">
    <div class="card">
        <div class="card-header">
            <p>popover 控件</p>
        </div>
        <div class="card-block">
            <!--<button type="button" class="btn btn-secondary" ngbPopover="popover content" container="body">
    不会被覆盖
</button>-->
            <button type="button" class="btn btn-secondary" placement="top" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on top" #popover="ngbPopover">
  Open Popover
</button>
        </div>
    </div>
</div>


<div class="row">
    <div class="card">
        <div class="card-header">
            <p>进度条控件</p>
        </div>
        <div class="card-block">
            <ngb-progressbar type="info" [value]="50"></ngb-progressbar>
            <ngb-progressbar type="danger" [value]="20" animated=true></ngb-progressbar>
            <ngb-progressbar type="danger" [value]="20" animated=true [striped]="true"></ngb-progressbar>
        </div>
    </div>
</div>
<!--
<div class="row">
    <div class="card">
        <div class="card-header">
            <p>评分控件</p>
        </div>
        <div class="card-block">
            <ngb-rating [(rate)]="selected" (hover)="hovered=$event" (leave)="hovered=0" [readonly]="readonly"></ngb-rating>
            <hr>
            <pre>
				Selected: <b>{{selected}}</b> Hovered: <b>{{hovered}}</b>
			</pre>
            <button class="btn btn-sm btn-outline-{{readonly ? 'danger' : 'success'}}" (click)="readonly = !readonly">
  {{ readonly ? "readonly" : "editable"}}
</button>

            <p>自定义模板</p>
            <ngb-rating [(rate)]="currentRate">
                <template let-fill="fill">
					<span class="star" [class.filled]="fill === 100">&#9733;</span>
				</template>
            </ngb-rating>
            <hr>
            <pre>Rate: <b>{{currentRate}}</b></pre>
        </div>
    </div>
</div>-->

<div class="row">
    <div class="card">
        <div class="card-header">
            <p>Tabs控件</p>
        </div>
        <div class="card-block">
            <ngb-tabset>
                <ngb-tab title="标签一">
                    <template ngbTabContent>
						<p>第一段</p>
					</template>
                </ngb-tab>
                <ngb-tab>
                    <template ngbTabTitle>标签二</template>
                    <template ngbTabContent>
						<p>第二段</p>
					</template>
                </ngb-tab>
                <ngb-tab title="这标签不可用" [disabled]="true">
                    <template ngbTabContent>
						<p>第三段</p>
					</template>
                </ngb-tab>
            </ngb-tabset>
        </div>
    </div>
</div>

<div class="row">
    <div class="card">
        <div class="card-header">
            <p>tip控件</p>
        </div>
        <div class="card-block">
            <button type="button" class="btn btn-secondary" placement="top" ngbTooltip="Tooltip on top">
    上方
</button>
            <button type="button" class="btn btn-secondary" placement="right" ngbTooltip="Tooltip on right">
  右侧
</button>
            <button type="button" class="btn btn-secondary" placement="bottom" ngbTooltip="Tooltip on bottom">
  下方
</button>
            <button type="button" class="btn btn-secondary" placement="left" ngbTooltip="Tooltip on left">
  左侧
</button>
        </div>
    </div>
</div>